---
title: Input OTP
description: A secure input field designed for entering one-time passwords (OTP), typically split into multiple boxes for better readability and user experience.
order: 5
published: true
references: ["https://github.com/guilhermerodz/input-otp"]
---

## Introduction
The **Input OTP** component is a versatile and customizable component that allows you to easily create an OTP input field. It offers a range of features, including customizable separators, validation, and more. Shoutout to [Guilherme Rodz](https://github.com/guilhermerodz) for creating this amazing component.

## Basic
Here’s the basic usage of the Input OTP component.

<How toUse="forms/input-otp/input-otp-demo"/>

## Installation
```bash
npx shadcn@latest add @intentui/input-otp
```

## Manual installation
```bash
npm i input-otp @heroicons/react
```

<SourceCode toShow='input-otp'/>

## Anatomy
```
import { Description } from "@/components/ui/field"
import {
  InputOTP,
  InputOTPControl,
  InputOTPGroup,
  InputOTPLabel,
  InputOTPSlot,
} from "@/components/ui/input-otp"
```

```
<InputOTP maxLength={6}>
  <InputOTPLabel>Code</InputOTPLabel>
  <InputOTPControl>
    <InputOTPGroup>
      {[...Array(6)].map((_, index) => (
        <InputOTPSlot key={index} index={index} />
      ))}
    </InputOTPGroup>
  </InputOTPControl>
  <Description>Please enter the 6-digit code we sent to your email.</Description>
</InputOTP>
```

## Separator
To include a separator between the OTP input groups, use the `InputOTPSeparator` component.

<How toUse="forms/input-otp/input-otp-separator-demo"/>

## Controlled
To control the Input OTP component, utilize the `value` and `onChange` props.

<How toUse="forms/input-otp/input-otp-controlled-demo"/>
